<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./bootstrap.min.css">
</head>

<body>
  <div id="app">
    <div class="container">
      <!-- 搜索 -->
      <form class="form-inline" style="padding: 20px 0">
        <input v-model="key" v-focus type="text" class="form-control" placeholder="输入关键字进行搜索">
      </form>
      <!-- 表格 -->
      <table class="table table-bordered table-hover">
        <thead>
          <tr>
            <th>编号</th>
            <th>品牌名称</th>
            <th>创建时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="item in newList" :key="item.id">
            <td>{{item.id}}</td>
            <td>{{item.brandName}}</td>
            <td>{{item.createTime|formatTime}}</td>
            <td><a @click.prevent="delBrand(item.id)" href="#">删除</a></td>
          </tr>
          <!-- 当数组的长度为0的时候，显示暂无数据 -->
          <tr v-if="newList.length===0">
            <td colspan="4" style="text-align: center;">暂无数据</td>
          </tr>
        </tbody>
      </table>
      <!-- 添加品牌 -->
      <form @submit.prevent="addBrand()" class="form-inline">
        <div class="form-group">
          <div class="input-group">
            <input v-model="brandName" type="text" class="form-control" placeholder="品牌名称">
          </div>
        </div>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <!-- 当点击按钮的时候，触发的是form表单的提交事件 -->
        <!-- button按钮默认解析的类型是 type="submit" -->
        <button class="btn btn-primary">添加品牌</button>
      </form>
    </div>
  </div>
  <script src="./vue.js"></script>
  <script>
    // 过滤器 filter
    Vue.filter('formatTime',(val)=>{
      // val 是使用当前过滤器的管道符前的js表达式的执行结果
      const date = new Date(val)
      // 得到字符串格式的日期：2020-07-09 18:00:00
      const y = String(date.getFullYear())
      const m = String(date.getMonth() + 1).padStart(2,0)
      const d = String(date.getDate()).padStart(2,0)
      const hh = String(date.getHours()).padStart(2,0)
      const mm = String(date.getMinutes()).padStart(2,0)
      const ss = String(date.getSeconds()).padStart(2,0)
      return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
    })

    // 自定义指令 directive
    Vue.directive('focus', {
      // 使用该指令的元素创建完毕后执行
      inserted (el) {
        // el 是使用该指令的dom元素
        // el.click() 触发点击事件 el.foucs() 触发获取焦点事件  自然获取了焦点
        el.focus()
      }
    })


    const vm = new Vue({
      el: '#app',
      data: {
        // 品牌列表
        list: [
          { id: 1, brandName: '宝马', createTime: new Date() },
          { id: 2, brandName: '奔驰', createTime: '2020-06-10' },
          { id: 3, brandName: '奥迪', createTime: '2020-02-10' },
          { id: 4, brandName: '马自达', createTime: '2020-02-10' }
        ],
        // 输入品牌名称
        brandName: '',
        // 输入的内容
        key: ''
      },
      computed: {
        newList () {
          // 筛选后的数组
          // 筛选逻辑：根据key去每条数据中查询，符合条件的数据，放到新数组中，最后return
          // const arr = []
          // this.list.forEach(item=>{
          //   if (item.brandName.includes(this.key)) {
          //     arr.push(item)
          //   }
          // })
          // return arr
          return this.list.filter(item=>item.brandName.includes(this.key))
        }
      },
      methods: {
        // 删除逻辑
        delBrand(id) {
          // 确认框
          if (confirm('您确认删除该品牌吗？')) {
            // 根据ID拿索引
            const index = this.list.findIndex(item => item.id === id)
            // 根据索引进行移除
            this.list.splice(index, 1)
          }
        },
        // 添加品牌
        addBrand() {
          // 通过v-model绑定输入框，可以实时的获取输入的内容
          // console.log(this.brandName)
          // 严谨判断，未输入内容，提示 + 阻止程序运行
          // trim()是去除字符串左右两侧的空格，然后去判断会更加严谨
          if (!this.brandName.trim()) {
            return alert('请输入品牌名称')
          }
          // 组织一个对象：id brandName createTime
          // 正常逻辑：去除数组中最后一项数据的ID累加1即可
          // 极端情况：数组中已经没有数据，此时ID为1即可
          const obj = {
            id: this.list.length ? this.list[this.list.length - 1].id + 1 : 1,
            brandName: this.brandName,
            createTime: new Date()
          }
          // 追加到数组中即可
          this.list.push(obj)
          // 清空输入框
          this.brandName = ''
        }
      }
    })
  </script>
</body>

</html>